<template>
	<view class="banner">
		<followItemVue v-for="(item,index) in list" :item="item" :key="index"></followItemVue>
		<uni-load-more :status="hasMore && isLoading ? 'loading' : 'noMore'"></uni-load-more>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		apiGetFollow
	} from '@/api/apis';
	import followItemVue from '@/components/follow-item/follow-item.vue';
	import {onReachBottom} from "@dcloudio/uni-app"
	const list = ref([])
	let page = ref(1)
	let hasMore = ref(true)
	let isLoading = ref(false)
	const getList = async () => {
		await apiGetFollow().then(res => {
			list.value = res.data.data
		})
	}
	onReachBottom(async () => {
		if (isLoading.value || !hasMore.value) return
		isLoading.value = true
		page.value = page.value + 1
		await apiGetFollow({
			page: page.value
		}).then(res => {
			if (res.data.data.length > 0) {
				isLoading.value = false
				list.value = [...list.value, ...res.data.data]
				if (!res.data.has_more) hasMore.value = false
			} else {
				hasMore.value = false
				isLoading.value = false
			}
		})
	
	})
	getList()
</script>

<style lang="scss" scoped>

</style>